<template>
    <div class="body">
        <div class="stars">
            <div v-for="(item, index) in starsCount" :key="index" class="star" ref="star">

            </div>
        </div>
        <div class="login-box">
            <!-- 猫头鹰 -->
            <div :class="this.showEyes" id="owl">
                <!-- hand:手 -->
                <div class="hand"></div>
                <div class="hand hand-r"></div>
                <!-- 手臂 -->
                <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                </div>
            </div>
            <el-form :rules="loginRules" ref="loginFormName" :model="loginForm" class="loginContainer"
                     v-loading="loading"
                     element-loading-text="拼命加载中"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="rgba(0, 0, 0, 0.8)"
                     @keyup.enter.native="loginSubmit"
            >
                <!-- 输入表单 -->
                <div class="input-box">
                    <el-form-item prop="username">
                        <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" @focus="closeEyes"
                                  @blur="openEyes"></el-input>
                    </el-form-item>
                    <el-form-item prop="verifyCode">
                        <el-input type="text" v-model="loginForm.verifyCode" placeholder="点击图片更换验证码"
                                  style="width: 250px;margin-right: 5px"></el-input>
                        <img :src="captchaUrl" @click="refreshCaptchaUrl" alt="丢失了" style="padding-bottom: 15px">
                    </el-form-item>
                    <el-checkbox v-model="checked" class="loginRememberMe">记住我</el-checkbox>
                    <el-button type="primary" style="width: 100%" @click.prevent="loginSubmit"> 登录</el-button>
                </div>
            </el-form>
        </div>
        <Anchor></Anchor>
    </div>
</template>
<script>

    import Anchor from "../components/blog/Anchor";
    export default {
        name: "LoginMao",
        components: {Anchor},
        methods: {
            // 猫头鹰
            closeEyes() {
                this.showEyes = 'owl password'
            },
            openEyes() {
                this.showEyes = 'owl'
            },
            // 用于刷新验证码的方法
            refreshCaptchaUrl() {
                this.captchaUrl = '/captcha?time=' + new Date();
            },
            // 用于登录的方法
            loginSubmit() {
                this.$refs.loginFormName.validate((valid) => {
                    if (valid) {
                        // 点击登录开始加载
                        this.loading = true;
                        this.postRequest('/login', this.loginForm).then(resp => {
                            // 看一下返回信息
                            // alert(JSON.stringify(resp));
                            if (resp) {
                                console.log(resp);
                                // 登录完关闭加载
                                this.loading = false;
                                // 获取后端返回的令牌,并放入sessionStorage里面
                                const tokenStr = resp.data.tokenHead + resp.data.token;
                                window.sessionStorage.setItem('tokenStr', tokenStr);
                                // 跳转页面到首页，用replace防止退过多到登录
                                // 安全性加强跳转,防止路径输入问题
                                let path = this.$route.query.redirect;
                                this.$router.replace((path === '/' || path === undefined) ? '/home' : path);
                            }

                        })
                        this.$message.success('Hello!' + this.loginForm.username + '!  ^v^~');
                    } else {
                        this.$message.error('请输入所有字段!');
                        return false;
                    }
                });
            }
        },
        mounted() {
            let _this = this
            let startArr = _this.$refs.star
            console.log(startArr)
            startArr.forEach(item => {
                var speed = 0.2 + (Math.random() * 1);
                var thisDistance = _this.distance + (Math.random() * 300);
                item.style.transformOrigin = `0 0 ${thisDistance}px`;
                item.style.transform = `translate3d(0,0,-${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed},${speed})`;
            })
        },
        //创建前设置
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background: radial-gradient(200% 100% at bottom center,#f7f7b6,#e96fe2,#1b2947);\n' +
                '        background: radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);\n' +
                '        background-attachment: fixed;\n' +
                '        overflow: hidden;')
        },
        //销毁前清除
        beforeDestroy() {
            window.removeEventListener('keydown',this.keyDown,false);

            document.querySelector('body').removeAttribute('style')
        },
        data() {
            return {
                showEyes: "owl",
                // 表单数据
                loginForm: {
                    username: '',
                    password: '',
                    verifyCode: ''
                },
                // 验证码图片
                captchaUrl: '/captcha?time=' + new Date(),
                // 记住我默认选项
                checked: true,
                // 加载效果控制属性
                loading: false,
                // 表单校验规则
                loginRules: {
                    username: [
                        {required: true, message: '请输入用户名称', trigger: 'blur'},
                        {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入登录密码', trigger: 'blur'},
                        {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
                    ],
                    verifyCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                },
                // 星空背景
                starsCount: 800,// 星星数量
                distance: 800,//间距
            }
        }
    }
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }

    /*猫头鹰*/
    .login-box {
        /* 相对定位 */
        position: relative;
        width: 320px;
    }

    .input-box {
        display: flex;
        flex-direction: column;
    }

    .input-box input {
        height: 40px;
        border-radius: 3px;
        /* 文字缩进15px */
        text-indent: 15px;
        /* outline绘制元素周围线的形状 */
        outline: none;
        /* 边框样式 */
        border: none;
        margin-bottom: 15px;
    }

    .input-box input:focus {
        outline: 1px solid lightseagreen;
    }

    .input-box button {
        border: none;
        height: 45px;
        background-color: lightseagreen;
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
    }

    /* 接下来是猫头鹰的样式 */
    .owl {
        width: 211px;
        height: 108px;
        /* 背景图片猫头鹰的头 */
        background: url("../assets/images/owl-login.png") no-repeat;
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .owl .hand {
        /* 自己画两个圆充当猫头鹰的手 */
        width: 34px;
        height: 34px;
        border-radius: 40px;
        background-color: #472d20;
        position: absolute;
        left: 12px;
        bottom: -8px;
        /* 沿着y轴缩放0.6倍（压扁） */
        transform: scaleY(0.6);
        /* ease-out:规定以慢速结束的过渡效果,完成该动画需要0.3s */
        transition: 0.3s ease-out;
    }

    .owl .hand.hand-r {
        left: 170px;
    }

    /* 定义密码焦点触发时猫头鹰手的样式 */
    .owl.password .hand {
        transform: translateX(42px) translateY(-15px) scale(0.7);
    }

    .owl.password .hand.hand-r {
        transform: translateX(-42px) translateY(-15px) scale(0.7);
    }

    .owl .arms {
        position: absolute;
        top: 58px;
        width: 100%;
        height: 41px;
        overflow: hidden;
    }

    /* 猫头鹰的手臂(翅膀) */
    .owl .arms .arm {
        width: 40px;
        height: 65px;
        position: absolute;
        left: 20px;
        top: 40px;
        background: url("../assets/images/owl-login-arm.png") no-repeat;
        transform: rotate(-20deg);
        transition: 0.3s ease-out;
    }

    .owl .arms .arm.arm-r {
        transform: rotate(20deg) scaleX(-1);
        left: 158px;
    }

    /* 定义密码焦点触发时猫头鹰手臂(翅膀)的样式 */
    .owl.password .arms .arm {
        transform: translateY(-40px) translateX(40px);
    }

    .owl.password .arms .arm.arm-r {
        transform: translateY(-40px) translateX(-40px) scaleX(-1);
    }

    /*!*表体*!*/
    /*.loginContainer {*/
    /*    opacity: 0.7;*/
    /*    border-radius: 15px;*/
    /*    background-clip: padding-box;*/
    /*    margin: 180px auto;*/
    /*    width: 350px;*/
    /*    padding: 15px 35px 15px 35px;*/
    /*    background: #fff;*/
    /*    border: 1px solid #eaeaea;*/
    /*    box-shadow: 0 0 25px #cac6c6;*/
    /*}*/

    /*!*表头*!*/
    /*.loginTitle {*/
    /*    margin: 0 auto 10px auto;*/
    /*    text-align: center;*/
    /*}*/

    /*记住我按钮*/
    .loginRememberMe {
        text-align: left;
        margin: 0 0 15px 0;
    }

    /*处理验证码换行问题*/
    .el-form-item__content {
        display: flex;
        align-items: center;
    }

    @keyframes rotate {
        0% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }
        100% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
    }

    .body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: absolute;
        perspective-origin: 50% 100%;
        left: 50%;
        animation: rotate 90s infinite linear;
        bottom: 0;
    }

    .star {
        width: 2px;
        height: 2px;
        background: #f7f7b8;
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
    }
</style>